<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <script>
        // javascript提供了三种方法改变函数内this指向 call() apply() bind()
        // 3. bind() 绑定 捆绑的意思
        var o = {
            name: "andy"
        };

        function fn(a, b) {
            console.log(this);
            console.log(a + b);
        };
        // bind 不会调用原来的函数  可以改变原来函数内部的this指向
        // 返回的是原函数改变this之后产生的新函数
        var f = fn.bind(o, 1, 2);
        f();
        // 如果有的函数我们不需要立即调用，但是又想改变这个函数内部的this指向 此时用bind
        // 例如：我们有几个按钮，当我们点击了之后，就禁用这个按钮，3秒之后开启这个按钮
        var btns = document.querySelectorAll("button");
        btns.forEach(function(value) {
            value.onclick = function() {
                this.disabled = true; //这个this指向的是btn这个按钮
                // var that = this;
                setTimeout(function() {
                        //that.disabled = false; //定时器函数里面的this指向的是window
                        this.disabled = false;
                    }.bind(this), 3000) //bind(this)方法写在定时器函数外面，所以这里的this指value
            }
        })
    </script>
</body>

</html>